<template>
  <div>
    <el-card>
      <div style="margin-bottom: 10px">
        <span>切换组织架构：</span>
        <el-select
          v-model="currentOrganization"
          style="width: auto"
          size="small"
          @change="organizationChange"
        >
          <el-option
            v-for="item in show.allOrganization"
            :key="item.id"
            :label="`${item.title}（${item.version}）`"
            :value="item.id"
          >
            <span style="float: left"
              >{{ item.title }}（{{ item.version }}）</span
            >
            <span style="float: right; color: #8492a6; font-size: 13px">
              {{ item.status_title }}</span
            >
          </el-option>
        </el-select>
      </div>
      <el-row class="button-group">
        <el-button size="small" type="primary" @click="add">添 加</el-button>
      </el-row>
      <el-row v-loading="config.loading" class="table-container">
        <!-- <div class="administrative-list">
            <div
              v-for="row in tableData"
              :key="row.id"
              class="administrative-li"
            >
              <div class="administrative-li__header">
                <div class="administrative-li__header-text">
                  {{ row.title }}
                </div>
                <div>
                  <el-button type="text" size="small" @click="del(row)"
                    >删除</el-button
                  >
                </div>
              </div>
              <div class="administrative-li__content">
                {{ row.content }}
              </div>
            </div>
          </div> -->
        <abstract-table :data="tableData">
          <el-table-column
            align="center"
            label="标题"
            prop="title"
            show-overflow-tooltip
          />
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <el-button type="text" size="small" @click="del(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </abstract-table>

        <abstract-pagination
          :model="searchForm"
          @current-change="pageChange"
          @size-change="pageSizeChange"
        />
      </el-row>
    </el-card>
    <add-dialog
      v-model="addDialog"
      :org-id="currentOrganization"
      @success="success"
    ></add-dialog>
  </div>
</template>

<script>
import tableMixin from '@/mixin/tablePageMixin'
import AddDialog from './components/addDialog.vue'
import { request } from '@/api/request'
import { elConfirm } from '@/utils/message'

export default {
  name: 'PolicyManage',

  components: {
    AddDialog
  },

  mixins: [tableMixin],

  data() {
    return {
      addDialog: false,
      currentOrganization: null,
      show: {
        allOrganization: null
      }
    }
  },

  mounted() {
    this.tableData = []
  },

  methods: {
    organizationChange() {
      this.getIndexData()
    },

    getStatusText(status) {
      switch (status) {
        case -1:
          return '已删除'
        case 1:
          return '编辑中'
        case 2:
          return '已确认'
        case 3:
          return '准备就绪'
        case 4:
          return '正在使用'
        case 5:
          return '已放弃使用'
        default:
          break
      }
    },

    success() {
      this.getIndexData()
    },

    del({ id }) {
      elConfirm('确认删除该政策？').then(() => {
        request('company/architecture/administrative/del', { id }, () => {
          this.$message.success('删除成功')
          this.getIndexData()
        })
      })
    },

    add() {
      this.addDialog = true
    },

    async getIndexData(isLoading = true) {
      isLoading && (this.config.loading = true)
      await request(
        'company/architecture/administrative/index',
        {
          p: this.searchForm.page,
          limit: this.searchForm.pageSize,
          org_id: this.currentOrganization
        },
        (res) => {
          this.searchForm.total = res.data.count
          this.tableData = res.data._list
        }
      ).finally(() => {
        isLoading && (this.config.loading = false)
      })
    },

    async getOrgListInfo() {
      await request(
        'company/architecture/administrative/getOrgListInfo',
        {},
        (res) => {
          // this.nowOrg = this.$store.state.user.nowOrg
          this.show.allOrganization = res.data.orgs
          // this.currentOrganization = this.nowOrg.id
          let currentOrganization = null
          for (let e of this.show.allOrganization) {
            if (e.status == 4) {
              currentOrganization = e.id
              break
            } else if (e.status == 3) {
              currentOrganization = e.id
            } else if (e.status == 2) {
              currentOrganization = e.id
            } else if (e.status == 1) {
              currentOrganization = e.id
            } else if (e.status == 5) {
              currentOrganization = e.id
            }
          }
          this.currentOrganization = currentOrganization
        }
      )
    },

    search() {
      if (this.config.loading) return
      this.config.loading = true
      this.getOrgListInfo()
        .then(async () => {
          await this.getIndexData(false)
        })
        .finally(() => {
          this.config.loading = false
        })
    }
  }
}
</script>

<style lang="scss" src="./style.scss" scoped></style>
